<template>  
   <div>
        <!-- 父传子 -->
        <ItemMusicTop :playlist="state.playlist"/>
        <ItemMusicList :itemList ="state.itemList" :subscribedCount="state.playlist.subscribedCount"/>
   </div>
</template>

<script>
// useRoute 可以从这个方法获取参数和数据
import {useRoute} from 'vue-router'
import {onMounted, reactive} from 'vue'

import {getMusicItemList, getItemList } from '@/request/api/item.js'

import ItemMusicTop from '@/components/item/ItemMusicTop'
import ItemMusicList from '@/components/item/ItemMusicList'

export default {
    setup(){
        //定义一个数做接收
        const state = reactive({
            playlist:{},//歌单的详情页数据
            itemList:[] //歌单的歌曲
        })

        onMounted(async ()=>{
           let id= useRoute().query.id
            console.log(id)
            //获取歌单详情页
            let res = await getMusicItemList(id);
            console.log(res)
            state.playlist = res.data.playlist;

            //歌单的歌曲
            let result = await getItemList(id);
            console.log(result)
            state.itemList = result.data.songs
            // 防止页面刷新，数据丢失，将数据保存到 sessionStorage中 (本地中)
            sessionStorage.setItem('itemDatail',JSON.stringify(state))
            //console.log(useRoute())
        })
        //返回数据
        return {state}
    },
    components:{
        ItemMusicTop,
        ItemMusicList
    }
};

</script>